{% extends 'index.html' %}
{% from 'partials/comments.html' import disqus with context %}
{% from 'partials/comments.html' import render_comments with context %}

{% block lang %}{{post.lang}}{% endblock %}
{% block title %}{{post.title}}{% endblock %}
{% block ogtype %}article{% endblock %}
{% block description %}{%-if post.description %}{{post.description}}{%-endif %}{% endblock %}
{% block ogimg %}{%-if post.image %}{{post.image}}{%-endif %}{% endblock %}
{% block extracss %}
<meta name="weibo:article:create_at" content="{{post.date|date('%Y-%m-%dT%H:%M:%SZ')}}">
<meta name="weibo:article:update_at" content="{{post.last_modified|date('%Y-%m-%dT%H:%M:%SZ')}}">
<meta name="keywords" content="{{post.tags|join(', ', 'text')}}">
<meta name="author" content="{{post.author}}">
<meta itemscope="" itemprop="pageEntity" itemtype="https://schema.org/WebPage" itemid="{{request.url}}">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.2/dist/photoswipe.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.2/dist/default-skin/default-skin.css">
{% endblock %}

{% block pagehead %}
<div class="section-heading">
  <h2>{{ post.title }}</h2>
  <div class="line-dec"></div>
  {% if post.description %}<h3>{{ post.description }}</h3>{% endif %}
</div>
{% endblock %}

{% block content %}
<article class="article" itemscope itemtype="http://schema.org/Article">
  <meta itemprop="headline" content="{{post.title}}">
  {% if post.description %}<meta itemprop="subtitle" content="{{post.description}}">{% endif %}
  <div class="d-lg-flex justify-content-between align-items-center text-center">
    <div class="post-item-meta">
      <span datetime="{{post.date}}" itemprop="datePublished">{{ moment(post.date).format('ll') }}</span>
      {% if post.author %}
      <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span class="post-author" itemprop="name">{{post.author}}</span>
      </span>
      {% endif %}
    </div>
    <meta itemprop="keywords" content="{{ post.tags|map(attribute='text')|join(',') }}">
    <div class="post-tags">
      {% for tag in post.tags %}
      <a href="{{tag.url}}" class="button"><i class="fa fa-tag"></i> {{tag.text}}</a>
      {% endfor %}
    </div>
  </div>
  {% if post.image %}
  <figure class="cover-image" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <meta itemprop="url" content="{{ post.image }}">
    <img class="lazy" data-src="{{ post.image }}" alt="">
    {% if post.image_caption %}<figcaption>{{ post.image_caption }}</figcaption>{% endif %}
  </figure>
  {% endif %}
  <div class="article-body" itemprop="articleBody">
    {{ post.html | safe }}
  </div>
  <meta itemprop="license" content="http://creativecommons.org/licenses/by-sa/4.0/">
</article>
<div class="cc">
  <div>{{_('Copyright')}}: <i class="fa fa-cc"></i> {{_('This work is released under')}} <a rel="license"
    href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a> {{_('License. ')}}</div>
  <div>{{_('Post Link')}}: <a href="{{request.url}}">{{request.url}}</a></div>
  <div>{{_('Last edited at')}}: <time datetime="{{post.last_modified}}" itemprop="dateModified">{{moment(post.last_modified).format('lll')}}</time></div>
</div>
{% if g.site.donate %}
<div class="text-center">
  <div>
    <button class="button" type="button" data-toggle="collapse" data-target="#donate-qrcode" aria-expanded="false" aria-controls="donate-qrcode">
      <i class="fa fa-heart"></i> {{_('Donate')}}
    </button>
  </div>
  <div id="donate-qrcode" class="collapse"><img src="{{ g.site.donate }}"></div>
</div>
{% endif %}
<div class="post-nav">
  <div {% if not post.previous %}style="visibility: hidden"{% endif %}>
    <a href="{{post.previous.url}}" class="left-item">
      <div>{{_('PREVIOUS POST')}}</div>
      <h5>{{post.previous.title}}</h5>
    </a>
  </div>
  <div {% if not post.next %}style="visibility: hidden"{% endif %}>
    <a href="{{post.next.url}}" class="right-item">
      <div>{{_('NEXT POST')}}</div>
      <h5>{{post.next.title}}</h5>
    </a>
  </div>
</div>
{% if not config.DEBUG and post.comment and integration.disqus and integration.disqus.enabled %}
{{ disqus(post) }}
{% endif %}
{% if post.comment and integration.comment %}
{{ render_comments(post, comments, comments_count) }}
{% endif %}
{% endblock %}

{% block right_extra %}
{% if post.toc %}
<div class="segment" id="contents">
  <h4>{{_('Contents')}}</h4>
  {{ post.toc|safe }}
</div>
{% endif %}
{% endblock %}

{% block additional %}
{% include 'partials/pswp.html' %}
{% endblock %}

{% block extrajs %}
{% if integration.addthis %}
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{integration.addthis.pubid}}"></script>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.2/dist/photoswipe.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.2/dist/photoswipe-ui-default.min.js" charset="utf-8"></script>
{% include 'partials/math.html' %}
{% endblock %}
